import { useEffect, useState } from 'react';
import { getProcessDetailModal } from '../servers';

interface ProcessDetailModalProps {
  currentIncidentID: string;
  activeRecord: any;
}

const ProcessDetailModal = (props: ProcessDetailModalProps) => {
  const [detailList, setDetailList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { currentIncidentID, activeRecord } = props;
  //调用流程详情数据
  useEffect(() => {
    setLoading(true);
    if (currentIncidentID) {
      getProcessDetailModal(currentIncidentID)
        .then((res: any) => {
          if (res?.code == 200) {
            let result = res.details[0];
            setDetailList(result);
          }
          setLoading(false);
        })
        .catch((err: any) => {
          setLoading(false);
        });
    }
  }, [currentIncidentID]);

  return (
    <>
      <iframe
        frameBorder={0}
        width="100%"
        height="100%"
        src={
          detailList?.formId
            ? `/inbiz/eform/Default/default?formId=${detailList.formId}
            &skin=techblue&processId=${detailList.processId}
            &taskType=archivetask&taskId=-23&id=${detailList.businessKey}
            &incidentId=${activeRecord.IncidentID}&formver=5
            &${
              activeRecord.IncidentState == 2
                ? `isArchiveTask=true`
                : `isArchiveTask=false`
            }
            &r=${new Date().getTime()}&IncidentState=${
                activeRecord.IncidentState
              }`
            : `/inbiz/web/${detailList.siteDomName}?dataVersionId=${detailList.pageVersion}&hideLayout=true#/page${detailList.url}?id=${detailList.businessKey}&taskId=-23&processId=${detailList.processDefinitionId}&instanceId=${detailList.processInstanceId}&pageVersion=${detailList.pageVersion}&formId=${detailList.pageId}&tabKey=-1&drafID=&Task_State=0&IncidentState=${activeRecord.IncidentState}`
        }
      ></iframe>
    </>
  );
};

export default ProcessDetailModal;
